<template>
	<view class="transMonitor">
		<uni-nav-bar color="#ffffff" background-color="#00aded" :statusBar="true" title="汽运监控" fixed="true"></uni-nav-bar>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" @click="tabClick" :scrollable="false" @change="tabChange"></u-tabs>
		</u-sticky>
		<view class="transMonitor_top">
			<!-- 搜索 -->
			<!-- 搜索 -->
			<dil-search :columnData="options.columnDataList" @onSearch="onSearch" v-if="options.columnDataList.length > 0"></dil-search>
		</view>
		<view class="transMonitor_main">
			<dil-card class="dilCard" @emitEvent="emitEvent" v-bind.sync="options"></dil-card>
		</view>
		<view class="transMonitor_floot"></view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			tabList: [
				{
					name: '待入厂',
					data: {
						unEnfactory: 1
					}
				},
				{
					name: '待装货',
					data: {
						loading: 1,
						businessScene: '销售'
					}
				},
				{
					name: '待卸货',
					data: {
						unloading: 1,
						businessScene: '采购'
					}
				},
				{
					name: '已出厂',
					data: {
						outFactory: 1
					}
				}
			],
			tabIndex: 0,
			options: {
				requestUrl: '/api/v1/report/getQYMonitors?apiId=688',
				requestQuery: {},
				cardSlotList: [
					{
						label: '作业详情',
						icon: 'eye',
						emitEvent: 'transOrderDetails',
						noPre: '1'
					}
				],
				columnDataList: [],
				totalNum: 0
			}
		};
	},
	onShow() {
		let data = this.tabList[this.tabIndex].data;
		this.getOrderSection(data);
	},
	mounted() {
		this.getOrderSectionDebounce = this.Tool.debounce((data) => {
			this.getOrderSection(data);
		}, 1500);
	},
	methods: {
		tabClick(item) {
			this.getOrderSectionDebounce(item.data);
		},
		tabChange(item) {
			this.tabIndex = item.index;
			this.getOrderSectionDebounce(item.data);
		},
		back() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		onSearch(item) {
			this.getOrderSectionDebounce(item);
		},
		async getOrderSection(
			data = {
				unEnfactory: 1
			}
		) {
			this.options.requestQuery = { ...data };
		},
		emitEvent(eventName, cardItem) {
			this[eventName](cardItem);
		},
		detailBrowse(item) {},
		//作业详情
		transOrderDetails(cardItem) {
			cardItem.apiId = 665;
			this.updateTransOrderItem(cardItem);
			uni.navigateTo({
				url: '/pages/transOrder/transOrderDetail'
			});
		},
		getSign(item) {},
		//vuex模块
		...mapMutations('common', ['updateTransOrderItem'])
	}
};
</script>

<style lang="scss" scoped>
.transMonitor {
	width: 100vw;
	height: 100%;
	background-color: #f5f5f5;
	&_top {
		background-color: #fff;
	}
	&_main {
	}
	&_floot {
		background-color: #fff;
	}
}
</style>
